<template>
	<view class="body">
		<view class="head">
			<view @click="goBack">取消</view>
			<view class="placeholder"></view>
			<view class="ok" @click="submit">确定</view>
		</view>
		<view class="content">
			<view class="title">文章内容<span>*</span></view>
			<view class="text">
				<up-textarea v-model="context" border="none" :focus="true" style="background-color: #F7F7F7;"
					height="268rpx" placeholder="请输入内容" maxlength="300"></up-textarea>
				<view class="tip">{{context.length}}/300</view>
			</view>
			<view class="picture">
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="9" width="204rpx" height="204rpx"></u-upload>
			</view>
		</view>
		<view class="address" @click="getAddress">
			<view class="tip">选择位置</view>
			<view class="text">
				{{address==null?"请选择":address.name}}
				<image src="@/static/home/right_arrow.png" mode="widthFix"></image>
			</view>
		</view>


		<up-action-sheet :actions="list" @select="selectSheet" cancelText="取消" @close="sheetShow=false"
			:show="sheetShow"></up-action-sheet>
	</view>
	<up-overlay :show="overlay"
		style="text-align: center;line-height: 100vh;background-color: rgba(255, 255, 255, 0.8);">
		请稍候
	</up-overlay>

</template>
<script setup>
	import { ref } from 'vue';
	import { fileUrl, userInfo, uploadFile } from '@/utlis/config.js';
	import api from '@/utlis/api.js'
	import { dict, DICT_TYPE } from '@/utlis/dict';
	import { onShow } from '@dcloudio/uni-app';


	const list = ref([]);
	const sheetShow = ref(false);
	const selectSheet = (item) => {
		if (item.value == 'delete') {
			address.value = null;
		} else {
			uni.chooseLocation({
				success: res => {
					address.value = res
				}
			});
		}
	}


	onShow(() => {
		dict(DICT_TYPE.FORUM_PUBLISH_ADDRESS).then(res => {
			for (var i = 0; i < res.length; i++) {
				let data = {
					name: res[i].dictLabel,
					id: res[i].dictCode,
					value: res[i].dictValue
				}
				list.value.push(data);
			}
			// list.value = res;
		})
	});
	const context = ref("");
	const fileList = ref([]);
	const address = ref(null)
	const overlay = ref(false);


	const afterRead = (event) => {
		fileList.value.push(...event.file);
	}
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1);
	}
	const getAddress = () => {
		if (address.value == null) {
			uni.chooseLocation({
				success: res => {
					address.value = res
				}
			});
		} else {
			sheetShow.value = true;
		}
	}

	const goBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}

	const submit = async () => {
		if (context.value == "") {
			uni.showToast({
				title: "文章内容不能为空！",
				icon: 'none',
				duration: 2000,
			})
			return;
		}

		overlay.value = true;
		let picture = []

		for (let i = 0; i < fileList.value.length; i++) {
			const res = await uploadFile(fileList.value[i].thumb);
			picture.push(res.ossId);
		}

		let data = {
			"context": context.value,
		}

		if (picture.length != 0) {
			data.images = picture.join(",");
		}

		if (address.value != null) {
			data.address = address.value.name;
			data.latitude = address.value.latitude;
			data.longitude = address.value.longitude
		}

		api("app/article/articlebase/", "POST", data).then(res => {
			overlay.value = false;
			if (res.code == 200) {
				uni.showToast({
					title: "发布成功，请等待审核",
					icon: 'none',
					duration: 1000,
				});
				uni.switchTab({ url: "/pages/forum/index" })
			}
		}).catch(err => {
			overlay.value = false;
		});
	}
</script>
<style lang="scss">
	.body {
		height: 100vh;
		background-image: url("@/static/public/background_96E919.png");
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #F7F7F7;

		.head {
			padding: 85rpx 32rpx 0 32rpx;
			display: flex;
			flex-wrap: wrap;

			view {
				width: 112rpx;
				text-align: center;
			}

			.placeholder {
				width: 462rpx;
			}
		}

		.content,
		.address {
			margin: 22rpx auto;
			width: 710rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			padding: 28rpx 24rpx;
			border-radius: 30rpx;
		}

		.content .title {
			font-weight: 500;
			font-size: 32rpx;
			color: #171515;
			line-height: 45rpx;

			span {
				color: #FF0000;
			}
		}

		.content .text {
			margin-top: 20rpx;
			border-radius: 28rpx;
			overflow: hidden;
			background-color: #F7F7F7;

			.tip {
				color: #D0D4DA;
				text-align: right;
				padding: 0 20rpx 10rpx 0;
			}
		}

		.content .picture {
			margin-top: 20rpx;
		}

		.address {
			display: flex;
			align-items: center;

			.tip {
				width: 140rpx;
			}

			.text {
				flex: 1;
				text-align: right;

				image {
					width: 30rpx;
				}
			}

		}
	}
</style>